/**
 * 商品列表 
 */ 
<template>
  <view class="prod-list">
    <view class="prod-list-search">
      <u-search v-model="prodKey" @change="prodKeyInput" @search="prodKeyInput"></u-search>
    </view>
    <u-loading-page :loading="loading"></u-loading-page>
    <view class="prod-list-box">
      <view class="prod-list-item" v-for="(item,index) in prodList" :key="index" @click="selectProd(item)">
        <view class="prod-list-item-left">
          {{item.categoryName}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      prodList: [],
      prodListCopy:[],
      total: 0,
      prodKey: '',
      loading: false
    };
  },
  onShow() {
    this.pageInit()
  },
  methods: {
    pageInit(){
      this.loading = true
      this.$http.get('product/list', {
				pageNo: 1,
        pageSize: 10000
			}, res => {
				if (res.code === 'success') {
          this.total = res.data.total
          this.prodList = res.data.items
          this.prodListCopy = JSON.parse(JSON.stringify(res.data.items))
				}
        this.loading = false
			})
    },
    selectProd(item){
      uni.$emit('updateProd', item)
      uni.navigateBack({ delta: 1 })
    },
    prodKeyInput(){
      const regex = new RegExp(this.prodKey, 'i');
      this.prodList = this.prodListCopy.filter(item => regex.test(item.categoryName));
    }
  },
};
</script>

<style lang="scss" scoped>
  .prod-list{
    padding: 36rpx 0;
    width: 100%;
    .prod-list-search{
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;
      padding: 24rpx;
      position: fixed;
      top: 0;
      box-sizing: border-box;
    }
    .prod-list-box{
      margin-top: 112rpx;
      .prod-list-item{
        font-size: 28rpx;
        color: #333;
        background-color: #fff;
        padding: 24rpx;
        border-bottom: 2rpx solid #eee;
        cursor: pointer;
      }
    }
  }
</style>
